<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=\, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
  
  <!-- 写模板 -->
  <div id="root">
    <p>{{ name }}</p>
    <p>{{ message }}</p>
  </div>

  <script>
    /* 
    1、拿到模板
    2、拿到数据（data）
    3、将数据与模板结合，得到 的是HTML元素（DOM元素）
    4、放到页面中
    */

    let reg = /\{\{(.+?)\}\}/g // ()->分组，.+->任意值，？->取消贪婪

    // 1
    let tmpNode = document.querySelector('#root')

    // 2
    let data = {
      name: '里斯',
      message: '是条狗'
    }

    // 3（递归）
    function compiler(template, data) {
      /* 
        1、判断template是什么数据类型（本案例是DOM元素；vue中是DOM-》字符串模板-》VNOde-》真正的DOM）
        2、判断子元素是否是文本节点
      */
     let childNodes = template.childNodes // 取出子元素
     for(let i = 0; i < childNodes.length; i++) {
      let type = childNodes[i].nodeType // 1 元素， 3 文本节点
      if(type === 3) {
        // 文本节点，可以判断里面是否有 {{}}插值
        let txt = childNodes[i].nodeValue // 该属性只有文本节点才有意义

        // 判断有没有双括号
        txt = txt.replace(reg, function(_, g) {
          let key = g.trim()
          let value = data[key]
          return value
        })

        // txt现在跟DOM元素是没有关系的
        childNodes[i].nodeValue = txt

      }
      else if(type === 1) {
        // 元素，考虑它有没有子元素，是否需要 将其子元素进行判断是否要插值
        compiler(childNodes[i], data)
      }
     } 

    }


    // 利用模板生成一个需要被渲染的HTML标签（准真正在页面中显示的标签）
    let generateNode = tmpNode.cloneNode(true) // DOM元素，可以这用用

    // 调用
    // compiler(tmpNode, data)
    compiler(generateNode, data)

    // 4
    root.parentNode.replaceChild(generateNode, root)

    /* 此案例(极简版)与Vue的区别 */
    /* 
    1、Vue使用的是虚拟DOM
    2、只考虑了单属性{{value}},而Vue中大量使用层级{{child.name.firstName}}
    */
  </script>
</body>
</html>